<template>
  <div class="testCode">
    <div v-if="modalShow">
      <Modal v-model="modal" width="400px" title="请拖动图片到指定位置">
        <div slot="close"></div>
        <slide-verify
            :l="42"
            :r="20"
            :w="362"
            :h="140"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            style='width: 362px;height: 140px;'
            class="slide-box"
            ref="slideblock"
        ></slide-verify>
        <div slot="footer"></div>
      </Modal>
    </div>
    <div v-else>
      <slide-verify
          :l="42"
          :r="20"
          :w="362"
          :h="140"
          slider-text="向右滑动"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          style='width: 362px;height: 140px;'
          class="slide-box"
          ref="slideblock"
      ></slide-verify>
    </div>


  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props:{
    modalShow:{
      type:Boolean,
      default:false
    }

  },
  data() {
    return {
      modal: false
    };
  },
  mounted() {

  },
  methods: {
    openModal() {
      this.modal = true
    },
    // 拼图成功
    onSuccess() {
      setTimeout(() => {
        this.modal = false
        this.onRefresh()
        this.$emit('onOk',true)

      }, 600)
    },
    // 拼图失败
    onFail() {
      this.onRefresh()
      // alert("拼图失败");
    },
    // 拼图刷新
    onRefresh() {
      // alert("拼图刷新");
      this.$refs.slideblock.reset();
    },

    submitForm(formName) {
      // 表单校验
      this.$refs[formName].validate(valid => {
        // 验证通过
        if (valid) {
          // 拼图出现
          this.flag = true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
/deep/ .slide-verify-slider {
  position: absolute !important;
  bottom: -10px !important;
  margin-top: 0 !important;
}

</style>